<template>
  <div class="app-container">
    <el-card :style="{ borderRadius: '5px' }">
      <div class="filter-container">
        <el-date-picker
          v-model="createTimeDateVul"
          format="yyyy-MM-dd "
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="创建时间开始"
          end-placeholder="创建时间结束"
          style="width: 220px; margin-right: 10px"
          @change="handlecreateTimeDateChange"
        />
        <el-select
          v-model="listQuery.status"
          style="width: 160px; margin-right: 10px"
          placeholder="请选择状态"
          clearable
        >
          <el-option
            v-for="item in statusOption"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
        <el-select
          v-model="listQuery.payStatus"
          style="width: 160px; margin-right: 10px"
          placeholder="请选择支付状态"
          clearable
        >
          <el-option
            v-for="item in payStatusOption"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>

        <el-select
          v-model="listQuery.houseCreatorId"
          style="width: 160px; margin-right: 10px"
          placeholder="请选择房源录入人"
          clearable
        >
          <el-option
            v-for="item in userAllOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>

        <el-select
          v-model="listQuery.photoUploaderId"
          style="width: 160px; margin-right: 10px"
          placeholder="请选择房屋实勘人"
          clearable
        >
          <el-option
            v-for="item in userAllOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>

        <el-button
          v-waves
          type="primary"
          style="margin-top: 10px"
          plain
          icon="el-icon-search"
          @click="handleFilter"
          >搜索</el-button
        >
        <el-button
          type="primary"
          plain
          style="margin-top: 10px"
          icon="el-icon-plus"
          @click="handleAdd"
          >添加</el-button
        >
      </div>
    </el-card>
    <el-card :style="{ marginTop: '10px', borderRadius: '5px' }">
      <el-table
        v-loading.body="!listLoading"
        :header-row-style="{ height: '70px' }"
        :header-cell-style="{
          color: '',
          fontSize: '',
          backgroundColor: '#dfe6ec',
        }"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
        tooltip-effect="dark"
      >
        <el-table-column
          label="序号"
          width="50px"
          align="center"
          type="index"
          show-overflow-tooltip
        />
        <el-table-column
          label="房源"
          prop="houseId"
          align="center"
          width=" 300px"
          :formatter="houseIdFormatter"
          show-overflow-tooltip
        />

        <el-table-column
          label="租房人"
          prop="userId"
          align="center"
          width="100px"
          :formatter="userIdFormatter"
          show-overflow-tooltip
        />

        <el-table-column
          label="创建时间"
          prop="createTime"
          align="center"
          width="170px"
          show-overflow-tooltip
        />

        <el-table-column
          label="状态"
          min-width="180px"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <span v-if="row.status == 1">已带看</span>
            <span v-if="row.status == 2">已上传支付合同(待支付)</span>
            <span v-if="row.status == 3">已上传支付凭证(支付中)</span>
            <span v-if="row.status == 4">已支付</span>
          </template>
        </el-table-column>

        <el-table-column
          label="支付状态"
          min-width="80px"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="{ row }">
            <span v-if="row.payStatus == 1">待支付</span>
            <span v-if="row.payStatus == 2">支付中</span>
            <span v-if="row.payStatus == 3">已支付</span>
            <span v-if="row.payStatus == 4">已支付</span>
          </template>
        </el-table-column>

        <el-table-column
          label="完成支付时间"
          prop="completePayTime"
          align="center"
          width="170px"
          show-overflow-tooltip
        />

        <el-table-column label="拒绝理由" prop="rejectReason" align="center" width="200px" show-overflow-tooltip />

        <el-table-column
          label="房源维护人"
          prop="visitorId"
          align="center"
          width="100px"
          :formatter="visitorIdFormatter"
          show-overflow-tooltip
        />

        <el-table-column
          label="房源首看人"
          prop="firstVisitorId"
          align="center"
          width="100px"
          :formatter="firstVisitorIdFormatter"
          show-overflow-tooltip
        />

        <el-table-column
          prop="contractUrls"
          label="合同"
          min-width="180px"
          align="center"
        >
          <template slot-scope="{ row }">
            <div style="display: flex; justify-content: center">
              <HzLink :src="row.contractUrls" />
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="payCertificateUrl"
          label="支付凭证"
          min-width="100px"
          align="center"
        >
          <template slot-scope="{ row }">
            <div style="display: flex; justify-content: center">
              <HzImg
                :src="row.payCertificateUrl"
                cssStyle="height: 80px;width: 80px"
              />
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="房源录入人"
          prop="houseCreatorId"
          align="center"
          width="100px"
          :formatter="houseCreatorIdFormatter"
          show-overflow-tooltip
        />

        <el-table-column
          label="房屋实勘人"
          prop="photoUploaderId"
          align="center"
          width="100px"
          :formatter="photoUploaderIdFormatter"
          show-overflow-tooltip
        />

        <el-table-column
          label="客源成交人"
          prop="dealerId"
          align="center"
          width="100px"
          :formatter="dealerIdFormatter"
          show-overflow-tooltip
        />

        <el-table-column label="总价" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.totalAmount }}</template>
        </el-table-column>

        <el-table-column label="单价" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.price }}</template>
        </el-table-column>

        <el-table-column label="租金月数" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.monthNum }}</template>
        </el-table-column>

        <el-table-column
          label="合同开始时间"
          prop="startTime"
          align="center"
          width="170px"
          show-overflow-tooltip
        />

        <el-table-column
          label="合同结束时间"
          prop="endDate"
          align="center"
          width="170px"
          show-overflow-tooltip
        />

        <el-table-column label="操作" align="center" width="220px"  fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              plain
              @click="handleUpdate(scope.row)"
              >编辑</el-button
            >
            <el-button v-if="scope.row.status == 3" size="mini" type="primary" plain
            @click="audit(scope.row)">审核</el-button>
            <!-- <el-button
              size="mini"
              type="danger"
              plain
              @click="handleDel(scope.row)"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <div v-show="listLoading" class="pagination-container">
        <el-pagination
          :current-page.sync="listQuery.currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="9"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible1"
      width="800px"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="commonInfo"
        label-width="120px"
      >
        <el-form-item label="房源:" prop="houseId">
          <el-select
            v-model="commonInfo.houseId"
            style="width: 350px"
            placeholder="请选择房源"
            clearable
          >
            <el-option
              v-for="item in houseAllOptions"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="租房人:" prop="userId">
          <el-select
            v-model="commonInfo.userId"
            style="width: 350px"
            placeholder="请选择租房人"
            clearable
          >
            <el-option
              v-for="item in userAllOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="房源维护人:" prop="visitorId">
          <el-select
            v-model="commonInfo.visitorId"
            style="width: 350px"
            placeholder="请选择房源维护人"
            clearable
          >
            <el-option
              v-for="item in userAllOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="房源首看人:" prop="firstVisitorId">
          <el-select
            v-model="commonInfo.firstVisitorId"
            style="width: 350px"
            placeholder="请选择房源首看人"
            clearable
          >
            <el-option
              v-for="item in userAllOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="合同:" prop="contractUrls">
          <HzFileUpload
            :urls.sync="commonInfo.contractUrls"
            :btn-name="'请上传合同'"
            :fileType.sync="contractUrls"
          />
        </el-form-item>
        <el-form-item label="支付凭证:" prop="payCertificateUrl">
          <HzImgUpload
            :urls.sync="commonInfo.payCertificateUrl"
            :btn-name="'请上传支付凭证'"
            :fileType.sync="payCertificateUrl"
          />
        </el-form-item>
        <el-form-item label="房源录入人:" prop="houseCreatorId">
          <el-select
            v-model="commonInfo.houseCreatorId"
            style="width: 350px"
            placeholder="请选择房源录入人"
            clearable
          >
            <el-option
              v-for="item in userAllOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="房屋实勘人:" prop="photoUploaderId">
          <el-select
            v-model="commonInfo.photoUploaderId"
            style="width: 350px"
            placeholder="请选择房屋实勘人"
            clearable
          >
            <el-option
              v-for="item in userAllOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="总价:" prop="totalAmount">
          <el-input
            v-model="commonInfo.totalAmount"
            style="width: 350px"
            placeholder="请输入总价"
          />
        </el-form-item>
        <el-form-item label="单价:" prop="price">
          <el-input
            v-model="commonInfo.price"
            style="width: 350px"
            placeholder="请输入单价"
          />
        </el-form-item>
        <el-form-item label="租金月数:" prop="monthNum">
          <el-input
            v-model="commonInfo.monthNum"
            style="width: 350px"
            placeholder="请输入租金月数"
          />
        </el-form-item>
        <el-form-item label="合同开始时间:" prop="startTime">
          <el-input
            v-model="commonInfo.startTime"
            style="width: 350px"
            placeholder="请输入合同开始时间"
          />
        </el-form-item>
        <el-form-item label="合同结束时间:" prop="endDate">
          <el-input
            v-model="commonInfo.endDate"
            style="width: 350px"
            placeholder="请输入合同结束时间"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="cancelData('form')"
          >取 消</el-button
        >
        <el-button
          v-if="dialogStatus === 'create'"
          type="primary"
          plain
          @click.native.prevent="createData('form')"
          >确 定</el-button
        >
        <el-button
          v-else
          type="primary"
          plain
          @click.native.prevent="updateData('form')"
          >确 定</el-button
        >
      </div>
    </el-dialog>


    <el-dialog :title="审核" :visible.sync="showAudit" width="35%">
      <el-form ref="dataForm" :model="commonInfo" label-width="120px">
        <el-form-item label="总价:" prop="totalAmount">
          <el-input type="text" autosize v-model="commonInfo.totalAmount" style="width: 350px" disabled  />
        </el-form-item>
        <el-form-item label="支付凭证:" prop="totalAmount">
          <HzImg
                :src="commonInfo.payCertificateUrl"
                cssStyle="height: 80px;width: 80px"
              />
        </el-form-item>
        <el-form-item label="审核意见:" prop="rejectReason">
          <el-radio v-model="commonInfo.payStatus" label="3">同意</el-radio>
          <el-radio v-model="commonInfo.payStatus" label="4">拒绝</el-radio>
        </el-form-item>
        <el-form-item v-if="commonInfo.payStatus == 4" label="拒绝理由:" prop="rejectReason">
          <el-input type="textarea" autosize v-model="commonInfo.rejectReason" style="width: 350px"
            placeholder="请输入拒绝理由" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="cancelAudit('form')">取 消</el-button>
        <el-button type="primary" plain @click.native.prevent="doAudit('form')">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import HzFileUpload from "@/custom/HzFileUpload";
import HzImgUpload from "@/custom/HzImgUpload";
import HzImg from "@/custom/HzImg";
import HzLink from "@/custom/HzLink";
import waves from "@/directive/waves"; // waves directive
import {
  fetchList,
  saveObj,
  updateObj,
  uploads,
  delObj,
  getObj,
} from "@/api/system/order";

import { fetchAllList as fetchAllHouseList } from "@/api/system/house";
import { fetchAllList as fetchAllUserList } from "@/api/system/user";

//importDictOptions

import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
export default {
  name: "Common",
  directives: {
    waves,
  },
  components: {
    HzFileUpload,
    HzImgUpload,
    HzImg,
    HzLink,
  },
  data() {
    return {
      dateFil: [],
      selectGroup: null,
      showExportPanel: false,
      exportType: "",
      commonInfo: {},
      options: [],
      loading: false,
      dialogFormVisible1: false,
      dialogStatus: "",
      showAudit: false,
      textMap: {
        update: "编辑",
        create: "创建",
      },
      name: "",
      list: [],
      total: 0,
      importPanel: false,
      importLoading: null,
      listLoading: false,
      exportTitle: "",
      extra: {}, //额外参数(用于格式化)
      booleanOptions: [
        { name: "是", value: true },
        { name: "否", value: false },
      ],

      createTimeDateVul: [],
      createTimeStart: null,
      createTimeEnd: null,

      statusOption: [
        { name: "已带看", value: 1 },
        { name: "已上传支付合同(待支付)", value: 2 },
        { name: "已上传支付凭证(支付中)", value: 3 },
        { name: "已支付", value: 4 },
      ],
      payStatusOption: [
        { name: "待支付", value: 1 },
        { name: "支付中", value: 2 },
        { name: "已支付", value: 3 },
      ],

      //dictOptions

      houseAllOptions: [],
      userAllOptions: [],

      groups: [],
      listQuery: {
        needExtra: true,
        currentPage: 1,
        pageSize: 10,
      },
      rules: {},
    };
  },
  created() {
    this.getList();
    //initDictOptions

    this.createHouseIdInit();
    this.createUserIdInit();
  },
  activated() {},

  mounted() {},
  methods: {
    cancelAudit() {
      this.commonInfo = {};
      this.showAudit = false;
    },
    doAudit() {
      updateObj(this.commonInfo).then(() => {
            this.getList();
            this.showAudit = false;
            this.$notify({
              title: "成功",
              message: "操作成功",
              type: "success",
              duration: 2000,
            });
          });
    },
    audit(row) {
      this.commonInfo = { ...row };
      this.showAudit = true;
    },
    createHouseIdInit() {
      let param = {};
      param.needExtra = false;
      fetchAllHouseList(param).then((response) => {
        this.houseAllOptions = response.data;
      });
    },

    createUserIdInit() {
      let param = {};
      param.needExtra = false;
      fetchAllUserList(param).then((response) => {
        this.userAllOptions = response.data;
      });
    },

    //initDictOptionFunction
    //initSelectFunctions

    handlecreateTimeDateChange(v) {
      this.createTimeDateVul = v;
      if (this.createTimeDateVul != null) {
        this.listQuery.createTimeStart = this.createTimeDateVul[0];
        this.listQuery.createTimeEnd = this.createTimeDateVul[1];
      } else {
        this.listQuery.createTimeStart = "";
        this.listQuery.createTimeEnd = "";
      }
      this.listQuery.page = 1;
      this.getList();
    },

    houseIdFormatter(row, column) {
      let id = row.houseId;
      if (this.extra) {
        let map = this.extra["houseIdExtra"];
        let obj = map[id];
        if (obj) {
          return obj["title"];
        }
      }
      return "";
    },
    userIdFormatter(row, column) {
      let id = row.userId;
      if (this.extra) {
        let map = this.extra["userIdExtra"];
        let obj = map[id];
        if (obj) {
          return obj["name"];
        }
      }
      return "";
    },
    visitorIdFormatter(row, column) {
      let id = row.visitorId;
      if (this.extra) {
        let map = this.extra["visitorIdExtra"];
        let obj = map[id];
        if (obj) {
          return obj["name"];
        }
      }
      return "";
    },
    firstVisitorIdFormatter(row, column) {
      let id = row.firstVisitorId;
      if (this.extra) {
        let map = this.extra["firstVisitorIdExtra"];
        let obj = map[id];
        if (obj) {
          return obj["name"];
        }
      }
      return "";
    },
    houseCreatorIdFormatter(row, column) {
      let id = row.houseCreatorId;
      if (this.extra) {
        let map = this.extra["houseCreatorIdExtra"];
        let obj = map[id];
        if (obj) {
          return obj["name"];
        }
      }
      return "";
    },
    photoUploaderIdFormatter(row, column) {
      let id = row.photoUploaderId;
      if (this.extra) {
        let map = this.extra["photoUploaderIdExtra"];
        let obj = map[id];
        if (obj) {
          return obj["name"];
        }
      }
      return "";
    },
    dealerIdFormatter(row, column) {
      let id = row.dealerId;
      if (this.extra) {
        let map = this.extra["dealerIdExtra"];
        let obj = map[id];
        if (obj) {
          return obj["name"];
        }
      }
      return "";
    },

    handleAdd() {
      this.commonInfo = {};
      this.dialogFormVisible1 = true;
      this.dialogStatus = "create";
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.currentPage = val;
      this.getList();
    },
    createData() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          saveObj(this.commonInfo).then(() => {
            this.getList();
            this.dialogFormVisible1 = false;
            this.cancelData();
            this.$refs.cascader.handleClear({});
            this.$notify({
              title: "成功",
              message: "添加成功",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },
    handleUpdate(row) {
      this.commonInfo = { ...row };
      this.dialogStatus = "update";
      this.dialogFormVisible1 = true;
    },
    updateData() {
      delete this.commonInfo.createTime;
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          updateObj(this.commonInfo).then(() => {
            this.getList();
            this.dialogFormVisible1 = false;
            this.cancelData();
            this.$refs.cascader.handleClear({});
            this.$notify({
              title: "成功",
              message: "修改成功",
              type: "success",
              duration: 2000,
            });
          });
        }
      });
    },
    cancelData() {
      this.commonInfo = {};
      this.dialogFormVisible1 = false;
      this.$refs["dataForm"].resetFields();
    },
    handleDel(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delObj({ ids: row.id }).then((res) => {
          if (res.statusCode === 8201) {
            this.handleFilter();
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success",
              duration: 2000,
            });
          } else {
            this.$notify({
              title: "失败",
              message: "删除失败",
              type: "success",
              duration: 2000,
            });
          }
        });
      });
    },
    getList() {
      this.listLoading = false;
      fetchList(this.listQuery).then((response) => {
        this.list = response.data.records;
        this.extra = response.extra;

        this.total = response.data.total;
        this.listLoading = true;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
  },
};
</script>
<style></style>
